import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef, useState } from 'react';
import ResourceForm from './components/resourceForm';
import { deleteResource, queryResourceList } from '@/services/system/SystemController';
import OptionBar from '@/components/OptionBar';

const Page: React.FC = () => {
  const actionRef = useRef<ActionType>();
  // null关闭窗口，0新建描述
  const [resource, setResource] = useState<null | System.ResourceInfo | 0>(null);

  const columns: ProColumns<System.ResourceInfo>[] = [
    { title: '资源路径', dataIndex: 'path' },
    // {
    //   title: '请求方法',
    //   dataIndex: 'method',
    //   render: (_, entity) =>
    //     entity.method.split('|').map((x) => <Tag key={x}>{x}</Tag>),
    // },
    { title: '资源描述', dataIndex: 'description', ellipsis: true, responsive: ["md"], search: false },
    {
      title: '状态',
      dataIndex: 'status',
      width: "15%",
      valueType: "select",
      valueEnum: {
        true: { text: '启用', status: 'Success' },
        false: { text: '停用', status: 'Error' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: "20%",
      render: (_, record) => <OptionBar
        onUpdate={() => setResource(record)}
        onDelete={async () => { await deleteResource(record.id); actionRef.current?.reload(); }} />
    },
  ];
  return (
    <PageContainer header={{ extra: <Button type="primary" onClick={() => setResource(0)} key={0} title='新增'>新增</Button> }} ghost breadcrumbRender={false}>
      <ProTable<System.ResourceInfo>
        actionRef={actionRef}
        search={{ filterType: "light" }}
        rowKey="id"
        columns={columns}
        options={{ density: false, setting: false }}
        request={(q) => queryResourceList(q)}
        pagination={{ defaultPageSize: 15, showSizeChanger: true, pageSizeOptions: [10, 15, 20, 25, 30, 50] }}
      />
      <ResourceForm data={resource} onClose={() => { setResource(null); }}
        onFinish={() => { setResource(null); actionRef.current?.reload(); }}
      />
    </PageContainer>
  );
};

export default Page;
